<template>
    <div style="min-height: 500px">
        <el-collapse style="width: 100%" :accordion="true" @change="onChange" v-model="vModel">
            <el-collapse-item v-for="(item,index) in purChaseData" :name="item.PurchaseNumber"
                              :key="index" style="width: 100%;overflow: hidden;">
                <template slot="title" style="width: 100%;height: 150px">
                    <el-row style="width: 100%">
                        <el-col :span="22">
                            <el-col :span="3" style="text-align: left">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        {{item.PurchaseNumber}}
                                    </div>
                                    <div style="width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
                                        {{item.PurchaseNumber}}
                                    </div>
                                </el-tooltip>
                            </el-col>
                            <el-col :span="3" style="text-align: center">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        {{GetUserName(item.PurchaseUserId)}}
                                    </div>
                                    <div style="width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
                                        {{GetUserName(item.PurchaseUserId)}}
                                    </div>
                                </el-tooltip>
                            </el-col>
                            <el-col :span="3" style="text-align: center">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        {{fmtDate(item.PurchaseDate)}}
                                    </div>
                                    <div style="width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
                                        {{fmtDate(item.PurchaseDate)}}
                                    </div>
                                </el-tooltip>
                            </el-col>
                            <el-col :span="3" style="text-align: center">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        {{item.TotalPrice}}
                                    </div>
                                    <div style="width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
                                        {{item.TotalPrice}}
                                    </div>
                                </el-tooltip>
                            </el-col>
                            <el-col :span="8" style="text-align: center">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        {{GetProjectName(item.ProjectId)}}
                                    </div>
                                    <div style="width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
                                        {{GetProjectName(item.ProjectId)}}
                                    </div>
                                </el-tooltip>
                            </el-col>
                            <el-col :span="4" style="text-align: right">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        {{item.PurchaseCause}}
                                    </div>
                                    <div style="width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
                                        {{item.PurchaseCause}}
                                    </div>
                                </el-tooltip>
                            </el-col>
                        </el-col>
                        <el-col :span="2">
                            <el-button type="success" class="BtnSize" size="mini" plain @click="onPurchaseOrder(item)">
                                采购单
                            </el-button>
                        </el-col>
                    </el-row>
                </template>
                <el-table v-if="!TablePurchase.dialog" :data="item.addPurchase"
                          ref="multipleTable"
                          border>
                    <el-table-column header-align="center" prop="index" label="序号" align="center"
                                     width="130">
                        <template slot-scope="scope">
                            {{scope.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" prop="ReferenceWebsite" label="名称"
                                     align="center"></el-table-column>
<!--                    <el-table-column header-align="center" fixed prop="DeviceModel" label="规格型号"-->
<!--                                     align="center"></el-table-column>-->
                    <el-table-column header-align="center" prop="Amount" label="数量"
                                     align="center"></el-table-column>
<!--                    <el-table-column header-align="center" fixed prop="ReferenceWebsite" label="参考网址" align="center"-->
<!--                                     width="130">-->
<!--                        <template slot-scope="scope">-->
<!--                            <a :href="scope.row.ReferenceWebsite" target="_blank">{{ scope.row.ReferenceWebsite }}</a>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
<!--                    <el-table-column header-align="center" fixed prop="Unit" label="单位"-->
<!--                                     align="center"></el-table-column>-->
                    <el-table-column header-align="center" prop="SurveyUnitPrice" label="调研单价" align="center">
                        <el-table-column header-align="center" prop="SurveyUnitPrice1" label="1"
                                         align="center"></el-table-column>
                        <el-table-column header-align="center" prop="SurveyUnitPrice2" label="2"
                                         align="center"></el-table-column>
                        <el-table-column header-align="center" prop="SurveyUnitPrice3" label="3"
                                         align="center"></el-table-column>
                    </el-table-column>
                    <el-table-column header-align="center" prop="ReviewUnitPrice" label="复核单价"
                                     align="center"></el-table-column>
                    <el-table-column header-align="center" prop="TotalPrice" label="复核总价"
                                     align="center"></el-table-column>
                    <el-table-column header-align="center" prop="ActualPrice" label="实际支付价格"
                                     align="center"></el-table-column>
                    <el-table-column header-align="center" prop="ArrivalAddress" label="到货地址"
                                     align="center"></el-table-column>
                </el-table>
                <PurchaseTable v-if="TablePurchase.dialog" :audit-rule="auditRule" :all-department="AllDepartment"
                               :purchase="Purchase_details_"
                               :all-project="AllProject" :all-customer="AllCustomer"></PurchaseTable>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    import * as publicjs from "../../../../../public/Scriput/Public";
    import PurchaseTable from "../../../Purchase/Purchase/PurchaseTable"

    export default {
        name: "PurChase",
        props: {
            purChaseData: {
                type: Array,
                required: true
            },
        },
        components: {
            'PurchaseTable': PurchaseTable,
        },
        data() {
            return {
                //所有项目
                AllProject: [],// 单条数据详情(表格数据)
                Purchase_details_: {},
                TablePurchase: {
                    dialog: false,
                    title: '',
                },
                //审批数据
                auditRule: {},
                //所有部门数据
                AllDepartment: [],
                // 供应商信息
                AllCustomer: [],
                vModel: "",
            }
        },
        created() {
            this.AllProject = publicjs.GetAllProject(this.$http)
            this.AllDepartment = publicjs.GetAllDepartment(this.$http)
            this.AllCustomer = publicjs.GetAllCustomer(this.$http)
        },
        mounted() {

        },
        methods: {
            //获取对应人员名字
            GetUserName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                        if (this.$store.state.AllUsers[i].Id == value) {
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            //事件转化
            fmtDate(time) {
                return time.split(' ')[0];
            },
            //获取对应项目名字
            GetProjectName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllProject.length; i++) {
                        if (this.AllProject[i].Id == value) {
                            name = this.AllProject[i].ProjectName
                            return name
                        }
                    }
                }
            },
            //采购单审批弹框
            onPurchaseOrder(obj) {
                this.$http.get('Report/PurchaseOrder?PurchaseNumber=' + obj.PurchaseNumber).then(res => {
                    if (res.data.obj != null) {
                        this.auditRule = res.data.auditRule
                        this.Purchase_details_ = res.data.obj
                        this.TablePurchase.dialog = true
                        this.TablePurchase.title = obj.PurchaseNumber
                        this.vModel = obj.PurchaseNumber;
                    }
                })
            },
            onChange(activeNames) {
                this.TablePurchase.dialog = false;
            },
        }
    }
</script>

<style scoped>

</style>